{% extends 'web_base.html' %}
{% load staticfiles %}
{% block title %}
    首页
{% endblock %}


{% block web_body %}
    <div class="wrapper">
        <div class="sort hidden-sm hidden-xs">
            <!-- <div class="container"> -->
            <table>
                <th>全部分类</th>
                <tr>
                    <td><a href="">游戏笔记本</a></td>
                </tr>
                <tr>
                    <td><a href="">台式笔记本</a></td>
                </tr>
                <tr>
                    <td><a href="">办公键盘</a></td>
                </tr>
                <tr>
                    <td><a href="">游戏鼠标键/耳机</a></td>
                </tr>
                <tr>
                    <td><a href="">高清摄像头</a></td>
                </tr>
                <tr>
                    <td><a href="">VR专区</a></td>
                </tr>
                <tr>
                    <td><a href="">驱动下载</a></td>
                </tr>
                <tr>
                    <td><a href="">保修政策</a></td>
                </tr>
            </table>
            <!-- </div> -->
        </div>
        <!-- 轮播 -->
        {% for foo in slider %}
            <a href="http:www.baidu.com" class="slider"
               style="background: url({{ foo.image.url }}) no-repeat center; background-size: cover;"></a>
        {% endfor %}


    </div>
    <div class="promote">
        <div class="container">
            <div class="row">
                {% for pro in promote %}
                    <div class="col-lg-3 col-sm-3">
                        <div class="thumbnail">
                            <a href="{{ pro.url }}"> <img src="{{ pro.image.url }}"></a>
                        </div>
                    </div>

                {% endfor %}


            </div>
        </div>
    </div>
    <!-- 促销 -->

    <!-- 精选单品推荐 -->
    <div class="recommend">
        <div class="container">
            <h3>精选单品推荐</h3>
            <div class="row">
                {% for rec in recommend %}
                    <div class="col-sm-2 col-lg-2">
                        <div class="thumbnail">
                            <a href="{% url 'goods:goods_detail' rec.id %}"><img src="{{ rec.image.url }}" alt=""></a>
                            <h5>{{ rec.name }}</h5>
                            <p>{{ rec.desc }}</p>
                        </div>

                    </div>

                {% endfor %}


            </div>
        </div>
    </div>
    <!-- /精选单品推荐 -->

    <!-- goods_body -->
    <div class="goods_body">
    <div class="laptop">
        <div class="frame">
            <div class="container">
                <div class="title">
                    <h4>笔记本/游戏本</h4>
                    <div class="more"><a href="">MORE+</a></div>
                </div>
            </div>
            <div class="container">
                <div class="row">

                    <div class="col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img src="{% static '/media/lapBanner.jpg' %}" alt="">
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-8">
                        <div class="row">
                            {% for foo in laptop %}
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <a href="{% url 'goods:goods_detail' foo.id %}"><img src="{{ foo.image.url }}"
                                                                                             alt=""></a>
                                        <h5>{{ foo.name }}</h5>
                                        <p>{{ foo.desc }}</p>
                                        <span>¥{{ foo.price }}</span>
                                    </div>
                                </div>
                            {% endfor %}


                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="desktop">
        <div class="frame">
            <div class="container">
                <div class="title">
                    <h4>台式机/一体机</h4>
                    <div class="more"><a href="">MORE+</a></div>
                </div>
            </div>
            <div class="container">
                <div class="row">

                    <div class="col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img src={% static "/media/desk.jpg" %} alt="">
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-8">
                        <div class="row">
                            {% for desk in desktop %}
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <a href="{% url 'goods:goods_detail' desk.id %}"></a> <img
                                            src="{{ desk.image.url }}" alt="">
                                        <h5>{{ desk.name }}</h5>
                                        <p>{{ desk.desc }}</p>
                                        <span>¥{{ desk.price }}</span>
                                    </div>
                                </div>
                            {% endfor %}


                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="device">
        <div class="frame">
            <div class="container">
                <div class="title">
                    <h4>外设系列</h4>
                    <div class="more"><a href="">MORE+</a></div>
                </div>
            </div>
            <div class="container">
                <div class="row">

                    <div class="col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img src={% static "/media/device.jpg" %} alt="">
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-8">
                        <div class="row">
                            {% for part in parts %}
                                <div class="col-lg-4 col-md-4">
                                    <div class="thumbnail">
                                        <a href="{% url 'goods:goods_detail' part.id %}"> <img
                                                src={{ part.image.url }} alt=""></a>
                                        <h5>{{ part.name }}</h5>
                                        <p>{{ part.desc }}</p>
                                        <span>¥{{ part.price }}</span>
                                    </div>
                                </div>

                            {% endfor %}

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="hot">
        <div class="frame">
            <div class="container">
                <div class="title">
                    <h4>热评产品</h4>
                    <div class="more"><a href="">MORE+</a></div>
                </div>
            </div>
            <div class="container">

                <div class="row">
                    {% for lap in laptop %}
                        <div class="col-lg-2 col-sm-2">
                            <div class="thumbnail">
                                <a href="{% url 'goods:goods_detail' lap.id %}"><img src="{{ lap.image.url }}"
                                                                                     alt=""></a>
                                <h5>{{ lap.name }}</h5>
                                <p>{{ lap.desc }}</p>
                                <span>{{ lap.price }}</span>
                            </div>
                        </div>

                    {% endfor %}


                </div>

            </div>
        </div>
    </div>

{% endblock %}


